<template>
	<view>
		<view class="list-item flex-center pd-lg fill-base radius-16 rel" v-for="item in storeList">
			<image mode="aspectFill" class="king-img" :src="item.cover"
				v-if="item.cover" @click="goDetail(item.id)">
			</image>
			<view class="flex-1 ml-md max-510">
				<view class="flex-between" @click="goDetail(item.id)">
					<view>
						<view class="flex-y-center f-title c-title">
							<view class="text-bold  ellipsis">{{item.title}}</view>					
						</view>
						<view class="flex-y-center f-icontext mt-sm">
							<view class="flex-y-center"><i class="iconfont iconyduixingxingshixin icon-font-color"></i>
								<view class="star-text">{{item.star}}</view>
							</view>
							<view class="order-num">
								已服务 {{item.order_num > 9999 ? '9999+' : item.order_num}}单</view>						
						</view>	
						<view class="flex-y-center f-icontext mt-sm mb-sm">
							<view class="flex-center">
								<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
								<view class="f-desc c-title ml-sm">{{item.distance}}</view>
							</view>						
						</view>							
					</view>
					<view class="can-service-btn f-caption c-base radius-10" :style="{border:`2rpx solid ${primaryColor}`}">
						<view class="text" :style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">营业时间</view>
						<view class="time" :style="{color:primaryColor}">{{item.start_time}}-{{item.end_time}}</view>
					</view>
				</view>			
				<view class="flex-between">
					<view class="flex-y-center f-desc c-caption">
						<view class="flex-y-center ">
							联系方式:{{item.phone}}
						</view>	
					</view>


				<!-- 	<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"


				<!-- 	<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"

					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"



					<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"

						:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order',item.lat,item.lng,item.title)" style="width:130rpx;">
						<view class="item-btn flex-center f-desc c-base"
							:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
							导航
						</view>





					</auth> -->
					<auth  style="width:130rpx;" >
						<view class="item-btn flex-center f-desc c-base" @click="goDetail(item.id)"
							:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
							查看
						</view>







					</auth>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
export default {
   data() {
      return {
				storeList:[]
      }
   },
   async onLoad(option){
    this.getAddress()
		this.initIndex()
   },
	 computed: mapState({
			configInfo: state => state.config.configInfo,
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
		}),
   methods:{
		...mapActions(['getUserInfo']),
		
		goDetail(id){
			uni.navigateTo({
				url:'/user/pages/storeDetail?id='+id
			})
		},
		
    async getNearStoreList(param){
      let res = await this.$api.shopstore.nearStoreList(param)
			this.storeList = res
      this.$util.hideAll()
    },
    async getAddress() {
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					this.$util.showLoading()
					await this.$jweixin.wxReady2();
					let {
						latitude: lat = 0,
						longitude: lng = 0
					} = await this.$jweixin.getWxLocation()
					if (!lat) {
						this.$util.hideAll()
						this.$util.showToast({
							title: `请授权定位当前地址`
						})
						return
					}
					if (lat && lng) {
						let key = `${lat},${lng}`
						let data = await this.$api.base.getMapInfo({
							location: key
						})
						let {
							status,
							result
						} = JSON.parse(data)
						if (status == 0) {
							this.$util.hideAll()
							this.getNearStoreList({
								lat,
								lng,
							})
						}
					}
				}
				// #endif
				// #ifndef H5
				this.$util.showLoading()
				let {
					lat = '',
					lng = '',
				} = await this.$util.getBmapLocation()
				if (!lat) {
					this.$util.hideAll()
					this.$util.showToast({
						title: `请授权定位当前地址`
					})
					return
				}
				this.getNearStoreList({
					lat,
					lng,
				})
				// #endif
			},
			async initIndex(refresh = false) {
				// #ifdef H5
				if (!refresh && this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				await this.getUserInfo()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			toEmit(key,lat,lng,title) {
				console.log(lat,lng,99999)
				// #ifdef H5
				window.location.href = "https://uri.amap.com/marker?position="+lng+","+lat+"&name="+title
				// #endif
				this.$emit(key)
			}
   },
}
</script>
<style lang="scss">
.list-item {
	.top-tag {
		width: 40rpx;
		height: 30rpx;
		color: #B75E1D;
		background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
		border-radius: 8rpx 0 8rpx 0;
		top: 0;
		left: 0;
	}

	.item-img {
		width: 124rpx;
		height: 124rpx;
	}

	.king-img {
		width: 120rpx;
		height: 120rpx;
		// top: 110rpx;
		// left: -15rpx;
		z-index: 1;
	}


	.top-img {
		width: 146rpx;
		height: 140rpx;
		top: -7rpx;
		left: -11rpx;
	}

	.hot-img {
		width: 75rpx;
		height: 51rpx;
		top: 77rpx;
		left: 25rpx;
	}

	.new-img {
		width: 38rpx;
		height: 52rpx;
		top: 83rpx;
		left: 78rpx;
	}

	.item-tag {
		width: 100rpx;
		height: 32rpx;
		color: #000;
		background: rgba(216, 216, 216, 0.3);
		margin-top: 19rpx;
		margin-bottom: 6rpx;
	}

	.more-img {
		width: 94rpx;
		height: 33rpx;
		border-radius: 3px;
		transform: rotateZ(1turn);
	}

	.can-service-btn {
		height: 80rpx;
		margin-bottom: 30rpx;
		width: 150rpx;

		.bg {
			width: 64rpx;
			height: 28rpx;
			opacity: 0.1;
			border-radius: 3rpx;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.text {
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			width: 100%;
		}
		
		.time {
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			width: 100%;
		}				
	}

	.iconyduixingxingshixin {
		font-size: 28rpx;
		background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
	}

	.star-text {
		color: #FF9519;
		margin-left: 6rpx;
	}

	.order-num {
		color: #4D4D4D;
		margin-left: 16rpx;
	}

	.item-btn {
		width: 130rpx;
		height: 52rpx;
		border-radius: 100rpx;
	}
}
</style>
